<template>
  <div class="article-wrapper">
    <template v-if="Articles.length > 0">
      <ArticleItem
        v-for="item in Articles"
        :key="item.id"
        :articleInfo="item"
      />
    </template>
  </div>
</template>
<script setup>
import { getArticleList } from "@/api/article.js";
import { ref, onMounted,watch } from "vue";
import ArticleItem from "@/components/ArticleItem.vue";
const $props = defineProps(['typeId'])

let Articles = ref([]);
onMounted(() => {
  getList();
});



const getList = async (paramsObj) => {
  console.log(paramsObj,"obj")
  if (!paramsObj) {
    const res = await getArticleList();
    console.log(res.data,"文章列表")
    Articles.value = res.data;
    console.log(Articles,"list")
  } else {
    const res = await getArticleList(paramsObj);
    Articles.value = res.data;
  }
};

watch(()=>$props.typeId,(newValue,oldValue)=>{
  console.log(newValue,"props的typeid发生变化");
  getList({typeId:newValue});
},{immediate:true})

</script>
<style lang="scss" scoped>
.article-wrapper {
}
</style>
